<template>
  <div class="collection" v-if="collectionList != null">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.type }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
      <el-link slot="right" icon="el-icon-setting" :underline="false" @click="handleSetting">{{
        setting ? '取消管理' : '管理'
      }}</el-link>
    </my-tabs>
    <el-row class="collection-list" :gutter="22" v-if="collectionList.length > 0">
      <el-col :span="6" v-for="item in collectionList" :key="item.id">
        <div class="item">
          <div class="picture">
            <div class="box" @click="handleCoursePush(item)">
              <edu-image :src="item.cover_url" fit="cover"></edu-image>
              <span class="tag" :class="courseTypeClass[item.course_type]">{{
                item.course_type_text
              }}</span>
            </div>
            <div v-if="setting" class="delete-bg"></div>
            <transition name="el-fade-in">
              <el-row
                class="delete"
                type="flex"
                align="middle"
                justify="center"
                v-if="setting"
                @click.native="handleDelete(item)"
              >
                <i class="edu-icon-xinsui"></i>
                <span class="text">取消收藏</span>
              </el-row>
            </transition>
          </div>
          <div class="title" @click="handleCoursePush(item)">{{ item.title }}</div>
          <el-row type="flex" align="middle" justify="space-between">
            <div class="count">{{ item.sale_count }}人在学</div>
            <span class="price" v-if="item.price > 0">{{ item.price | formatMoney }}</span>
            <span class="free" v-else>免费</span>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <edu-no-data v-else></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduPagination
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          type: 'video',
          title: '点播'
        },
        {
          type: 'live',
          title: '直播'
        },
        {
          type: 'classes',
          title: '班级'
        }
      ],
      collectionList: null,
      setting: false,
      courseTypeClass: { 1: 'video', 2: 'live', 3: 'multipart', 4: 'classes' },
      routePath: 'video'
    }
  },
  mounted() {
    this.handleGetCollection()
  },
  methods: {
    // 列表
    handleGetCollection() {
      this.$api.getCollection(
        {
          source_type: this.routePath,
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          this.collectionList = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: res.data.total
          })
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.handleGetCollection()
    },
    // 管理
    handleSetting() {
      this.setting = !this.setting
    },
    // 取消收藏
    handleDelete(item) {
      this.$messageBox
        .confirm('是否取消收藏课程？')
        .then(() => {
          this.$api.deleteCollection(
            {
              source_type: this.routePath,
              source_id: item.source_id
            },
            res => {
              this.$message.success(res.msg, res => {
                this.handleGetCollection()
              })
            }
          )
        })
        .catch(() => {})
    },
    // 跳转课程
    handleCoursePush(item) {
      this.$router.push({ path: '/course/' + item.source_id })
    },
    handleClickMenu(data) {
      this.routePath = data.type
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleGetCollection()
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/hover.scss';
.collection {
  .collection-list {
    margin-top: 15px;
    .item {
      margin-bottom: 20px;
      position: relative;
      .picture {
        height: 0;
        padding-top: 110px;
        position: relative;
        .box {
          cursor: pointer;
        }
        .el-image {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
        .tag {
          padding: 5px 8px;
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          color: #ffffff;
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
          border-radius: 0px 0px 6px 0px;
          position: absolute;
          left: 0;
          top: 0;
          &.video {
            background-color: #ff8a8a;
          }
          &.live {
            background-color: #67c23a;
          }
          &.multipart {
            background-color: #80ccff;
          }
          &.classes {
            background-color: #ff8a52;
          }
        }
      }
      .delete-bg {
        background: rgba(0, 0, 0, 0.15);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 4px;
      }
      .delete {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 10;
        margin-left: -37px;
        margin-top: -37px;
        width: 74px;
        height: 74px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        flex-direction: column;
        color: #fff;
        cursor: pointer;
        .el-icon-delete {
          font-size: 16px;
        }
        .text {
          font-size: 12px;
          margin-top: 5px;
        }
      }
      .title {
        margin-top: 14px;
        padding: 0 6px;
        margin-bottom: 16px;
        color: $text-color-import;
        font-size: 14px;
        cursor: pointer;
        @include ellipsis();
      }
      .count {
        font-size: 12px;
        color: $text-color-auxiliary;
      }
      .price {
        font-size: 16px;
        color: $text-color-price;
      }
      .free {
        font-size: 16px;
        color: $text-color-free;
      }
    }
  }
}
</style>
